<script>
$(function() {
  $("#snmp_tables").delegate("#snmp_host_delete", 'click', function() {
    var snmp_host = $(this).parent().siblings(".snmp_host").text();
    _post_url('/snmp_host_delete', snmp_host, false);
  });

  $("#snmp_tables").delegate("#snmp_host_test", 'click', function() {
    var snmp_host = $(this).parent().siblings(".snmp_host").text();
    _post_url('/snmp_host_test', snmp_host, "发送成功");
  });

  $("#snmp_ip").on('keydown', function(e) {
    if (e.keyCode == 13) {
      return false;
    }
  });

  function _post_url(url, snmp_host, tip) {
    $.post(url, {
      'snmp_host': snmp_host
    }, function(data) {
      if (data.reply.is_success) {
        if (tip) {
          SelfAlert(tip, "完成提示")
        }
        load_snmp_tables();
      } else {
        error = data.reply.error;
        SelfAlert(error)
      }
    })
  }

  $("#simple_").click(function() {
    var val_ip_input = $("#snmp_ip");
    var snmp_ip = val_ip_input.val();
    var bValid = true;
    bValid = bValid && checkNull(val_ip_input, "IP地址不能为空。");
    bValid = bValid && checkipRegexp(val_ip_input, /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/i, "无效的IP地址。");
    if (!bValid) {
      $('.error-tip').css({
        left: '100px',
        top: '105px'
      });
      return;
    }
    val_ip_input.val('');
    if (bValid) {
      _post_url('/snmp', snmp_ip);
    }
  });

  function set_table_html(records) {
    var html = "<tr><td>接收端IP</td><td>操作</td></tr>";
    for (var i = 0; i < records.length; i++) {
      ip = records[i];
      html += "<tr style='border-collapse:separate; border-spacing:10px;'><td class='snmp_host'>" + ip + "</td>" + "<td><button class='btn btn-blue' id='snmp_host_test'>发送测试</button>" + "<button  style='margin-left:20px' class='btn btn-blue' id='snmp_host_delete'>删除</button></td></tr>"
    }
    $("#snmp_tables").html('');
    $("#snmp_tables").append(html);
  }

  function load_snmp_tables() {
    $.get("/snmp_hosts", function(data) {
      if (data.reply.is_success) {
        var records = data['records'];
        set_table_html(records);
      } else {
        error = data.reply.error;
        SelfAlert(error)
      }
    })
  }
  load_snmp_tables();
});

//-->
</script>
<style>
#snmp_tables {
  margin-top: 20px;
}

#snmp_tables tr {
  height: 50px;
  line-height: 50px;
}

#snmp_tables tr td {
  display: block;
  width: 200px;
  float: left;
}

form {
  margin: 40px 0;
  padding: 0 20px;
}

.snmp-table {
  margin: 40px 0;
  padding: 0 20px;
}
</style>
<div class="panel panel-f-style">
  <div class="panel-body" style="background-color:#fbfbfb">
    <div class="title-tag">
      <h3>SNMP</h3>
      <p>SNMP服务端配置</p>
    </div>
    <form method="POST" name="card" action>
      IP地址：
      <div class="error_tip"></div>
      <input type="text" class="val_ip" id="snmp_ip" name="T4" size="5">
      <button class="btn btn-blue" type="button" id="simple_">[['Add_'|translate]]</button>
      <div class="error-tip">
        <p></p>
        <span></span>
      </div>
    </form>
    <div class="snmp-table">
      <table id="snmp_tables">
      </table>
    </div>
  </div>
</div>
